<template>
  <div>
  <ol v-for="item in slist">
<p>姓名：{{item.name}}</p>
<p>年龄：{{item.age}}</p>
  </ol>
  <hr>
  <table>
    <tr>
      <td>用户编号</td>
      <td>借款用户账号</td>
      <td>借款款项名称</td>
      <td>借款金额</td>
      <td>剩余还款本金</td>
    </tr>
    <tr v-for="item in list">
      <td>{{item.id}}</td>
      <td>{{item.jname}}</td>
      <td>{{item.kuanxiang}}</td>
      <td>{{item.jine}}</td>
      <td>{{item.cishu}}</td>
    </tr>
  </table>
  <input type="text" v-model="str">
  <br>
  {{str}}
  </div>
</template>

<script setup lang="ts">
import {reactive,toRefs} from 'vue'

let data=reactive({
  slist:[{
    name:'张大',
    age:'21'
  },
  {
    name:'李尔',
    age:'20'
  },
  {
    name:'刘珊',
    age:'22'
  },
  {
    name:'钱嗣',
    age:'25'
  },
  {
    name:'赵武',
    age:'24'
  }
],
list:[
  {
    id:1,jname:'zhangsan',kuanxiang:'八维助学金',jine:'400',cishu:'0'
  },
  {
    id:2,jname:'lisi',kuanxiang:'八维助学金',jine:'10000',cishu:'10000'
  },
],
str:"双向数据绑定演示"
})

let {slist,list,str}=toRefs(data)
</script>

<style scoped>

</style>